import React, { useState, useEffect } from 'react'
import { Toast } from 'antd-mobile'  // 添加到顶部导入

import { ArrowLeft, WapHome, WeappNav } from '@react-vant/icons'
import { useNavigate,useLocation } from 'react-router-dom';
import styles from "./erratt.module.css"
import dayjs from 'dayjs'
import axios from 'axios';

export default function Erratt() {

  useEffect(() => {
    // 进入页面时设置
    const html = document.documentElement;
    const oldFontSize = html.style.fontSize;
    const setRem = () => {
      const width = html.clientWidth < 750 ? 750 : html.clientWidth;
      html.style.fontSize = (width / 750) * 75 + 'px';
    };
    setRem();
    window.addEventListener('resize', setRem);

    // 离开页面时恢复
    return () => {
      window.removeEventListener('resize', setRem);
      html.style.fontSize = oldFontSize || '';
    };
  }, []);

    const navigate = useNavigate()
    const location = useLocation();
    const attendanceDate = location.state.date;
    console.log(attendanceDate);
    
    

    const [list, setList] = useState(() => {
      let array = localStorage.getItem('user')
      return array ? JSON.parse(array) : []
    })


    const [fangshi,setfangshi] = useState('')
    const [yuanyin,setyuanyin] = useState('')

    const [formData, setFormData] = useState({
      QJtype: '年假',//请假类型
      QJfangshin: fangshi,//请假方式
      KStime: attendanceDate,//开始时间
      JStime: attendanceDate,//结束时间
      yuanyin: yuanyin,//请假原因
      username: list[0].username,//用户名
      bumen: list[0].bumen,
      zhiye: list[0].zhiye,
      zhuangtai: "1"
  });


  return (
    <div>
      {/* 顶部 */}

      <div className={styles.top}>
        <div className={styles.content}>
          <div onClick={() => { navigate(-1) }}><ArrowLeft style={{ fontSize: '20px', fontWeight: 'bolder' }} /></div>
          <div className={styles.iconDivider}></div>
          <div onClick={() => { navigate('/zhu') }}><WapHome style={{ fontSize: '20px', fontWeight: 'bolder', paddingRigth: '5px' }} /></div>
        </div>
        <h2>考勤统计</h2>
        <div className={styles.content}>
          <div><WeappNav style={{ fontSize: '25px', fontWeight: 'bolder', paddingLeft: '5px', paddingTop: '5px' }} /></div>
          <div className={styles.iconDivider}></div>
          <div><div className={styles.circleBorder}>
            <div className={styles.circleInner}></div>
          </div></div>
        </div>

      </div>

        
    
    {/* 申报人信息 */}
    <div className={styles.container}>
      <div className={styles.sectionTitle}>申报人信息</div>
      {list.map((item,index)=>{
        return(
      <div key={item._id} className={styles.userInfo}>
        <img className={styles.avatar} src={item.imgs} alt="avatar" />
        <div className={styles.userMain}>
          <div className={styles.userName}>{item.username}</div>
          <div className={styles.userDept} style={{marginTop:'10px'}}>所属部门：{item.bumen}</div>
        </div>
        <div className={styles.userRole}>
          <div className={styles.roleMain}>{item.zhiye}</div>
          <div className={styles.roleSub}>{item.zhiye=='经理'?'Managere':'Member'}</div>
        </div>

      </div>
      )
      })}
      
      {/* 修改这里，移除 green 类 */}
      <div className={styles.sectionTitle}>申请内容</div>
      <div className={styles.formRow}>
        <span className={styles.formLabel}>请假时间：</span>
          <span className={styles.formValue}>{dayjs(attendanceDate).format('YYYY-MM-DD')}</span>
        </div>
        <div className={styles.formRow}>
          <span className={`${styles.formLabel} ${styles.required}`}>*</span>
          <input className={styles.formInput} placeholder="请假方式" value={fangshi} onChange={(e)=>{setfangshi(e.target.value)}} />
        </div>
        <div className={styles.formRow}>
          <span className={`${styles.formLabel} ${styles.required}`}>*</span>
          <input className={styles.formInput} placeholder="请假原因" value={yuanyin} onChange={(e)=>{setyuanyin(e.target.value)}} />
        </div>
        <textarea
          className={styles.formTextarea}
          placeholder="考勤异常原因描述..."
          rows={6}
        />
        <div className={styles.formActions}>
          <button className={`${styles.btn} ${styles.uploadBtn}`}>附件上传</button>
          <button 
            className={`${styles.btn} ${styles.submitBtn}`}
            onClick={() => {
              if (!fangshi || !yuanyin) {
                Toast.show({
                  content: '请填写完整信息',
                  position: 'center'
                })
                return
              }
              axios.post('http://localhost:3111/attendance/qingjia',{formData}).then(res=>{
                console.log(res);
                if(res.data.code==200){
                  Toast.show({
                    content: '提交成功',
                    position: 'center',
                    afterClose: () => {
                      navigate('/Jiadetail',{state:{attendanceDate,fangshi,yuanyin}})
                    }
                  })
                }
              })
            }}
          >
            提交
          </button>
        </div>
      </div>
    </div>
  )
}
